<template>
  <view class="box">
    <view
      class="tou topNoBg"
      :style="'padding-top:' + statusBarHeight1 + 'px'"
      style="background: transparent"
    >
      <!-- <view class="toptitle">个人信息</view>
	  <image class="back" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" @click="back" />-->
      <image
        @click="back"
        class="image1"
        src="https://pic.bangbangtongcheng.com/static/seting-fanhui.png"
      />
      <span>切换账号</span>
    </view>
    <view class="topNoBg" :style="'padding-top:' + statusBarHeight1 + 'px'"></view>

    <view class="list">
      <view class="item" v-for="(item, index) in userAccountList">
        <view class="itemTop">
          <!-- 用户信息左侧区域 -->
          <div class="user-photo user-left" @click="set">
            <image
              :src="item.image || 'https://pic.bangbangtongcheng.com/static/my/header.png'"
              class="header-img"
            />
            <div class="flex label-box">
              <div
                class="personal-label"
                v-if="
                  item.userAuthenticationDto.userIdentityType === 'PERSONAL' ||
                  !item.userAuthenticationDto.userIdentityType
                "
              >
                <!-- <image src="https://pic.bangbangtongcheng.com/static/my/tag1.png" mode="" /> -->
                <text>个人</text>
              </div>
              <!-- 其他身份 -->
              <div v-else>
                <view v-if="item.phone" class="shop-label">
                  <!-- <image src="https://pic.bangbangtongcheng.com/static/my/tag2.png" mode="" /> -->
                  <text v-if="item.userAuthenticationDto.userIdentityType === 'HOUSE_BUILDING'"
                    >楼盘</text
                  >
                  <text
                    v-if="item.userAuthenticationDto.userIdentityType === 'HOUSE_REAL_ESTATE_SHOP'"
                    >房产商家</text
                  >
                  <text v-if="item.userAuthenticationDto.userIdentityType === 'HOUSE_BROKER'"
                    >房产经纪人</text
                  >
                  <text v-if="item.userAuthenticationDto.userIdentityType === 'CAR_DEALERSHIP_SHOP'"
                    >4S店</text
                  >
                  <text
                    v-if="item.userAuthenticationDto.userIdentityType === 'CAR_AUTO_TRADING_SHOP'"
                    >汽贸店</text
                  >
                  <text
                    v-if="item.userAuthenticationDto.userIdentityType === 'CAR_AUTO_REPAIR_SHOP'"
                    >汽车维修</text
                  >
                  <text
                    v-if="
                      item.userAuthenticationDto.userIdentityType === 'CAR_BEAUTY_DECORATION_SHOP'
                    "
                    >美容装饰</text
                  >
                  <text
                    v-if="
                      item.userAuthenticationDto.userIdentityType ===
                      'CAR_BROKER_CAR_SALES_CONSULTANT'
                    "
                    >汽车销售顾问</text
                  >
                  <text v-if="item.userAuthenticationDto.userIdentityType === 'RECRUITMENT_COMPANY'"
                    >招聘企业</text
                  >
                </view>
              </div>
            </div>
          </div>
          <view class="info">
            <!-- 已登录 -->
            <view class="user" v-if="item.phone">
              <view class="name">
                <view class="user-names" @click="set">
                  <!-- <view class="user-name">{{ item.nikeName || '系统默认昵称'}}</view> -->
                  <view class="user-name">{{ showNickName(item.nikeName) }}</view>
                </view>
              </view>

              <!-- 账号 -->
              <view class="user-account">
                <span>账号：{{ item.phone }}</span>
              </view>

              <!-- 用户评星，只有商家和经纪人才显示 -->
              <view
                v-if="
                  item.userAuthenticationDto.userIdentityType &&
                  item.userAuthenticationDto.userIdentityType !== 'PERSONAL'
                "
                class="user-label"
                @click="set"
              >
                <span>用户评星：</span>
                <uni-rate
                  style="margin: 0rpx"
                  :value="userInfo.score"
                  size="17"
                  margin="-1"
                  color="#EBEBED"
                  active-color="#FFCD00"
                  readonly
                />
              </view>

              <!-- 会员 -->
              <view class="user-member">
                <text
                  class="vip-rank"
                  @click="set"
                  :style="{
                    color: colors[item.memberLevel - 1].wordColor,
                    backgroundColor: colors[item.memberLevel - 1].bgColor,
                    borderColor: colors[item.memberLevel - 1].lineColor,
                  }"
                >
                  {{ item.memberLevelTitle }}
                </text>

                <!-- 认证用户 -->
                <text v-if="item.auditText === '认证用户'" class="vip-rank has-audit" @click="set">
                  <text v-if="item.userAuthenticationDto.userIdentityType === 'PERSONAL'"
                    >认证用户</text
                  >
                  <text v-if="item.userAuthenticationDto.userIdentityType === 'RECRUITMENT_COMPANY'"
                    >认证企业</text
                  >
                  <text
                    v-if="
                      item.userAuthenticationDto.userIdentityType === 'HOUSE_BUILDING' ||
                      item.userAuthenticationDto.userIdentityType === 'HOUSE_REAL_ESTATE_SHOP' ||
                      item.userAuthenticationDto.userIdentityType === 'CAR_DEALERSHIP_SHOP' ||
                      item.userAuthenticationDto.userIdentityType === 'CAR_AUTO_TRADING_SHOP' ||
                      item.userAuthenticationDto.userIdentityType === 'CAR_AUTO_REPAIR_SHOP' ||
                      item.userAuthenticationDto.userIdentityType === 'CAR_BEAUTY_DECORATION_SHOP'
                    "
                  >
                    认证商家
                  </text>
                  <text
                    v-if="
                      item.userAuthenticationDto.userIdentityType ===
                      'CAR_BROKER_CAR_SALES_CONSULTANT'
                    "
                    >认证汽车销售顾问</text
                  >
                  <text v-if="item.userAuthenticationDto.userIdentityType === 'HOUSE_BROKER'"
                    >认证经纪人</text
                  >
                </text>
                <!-- 未认证 -->
                <text v-else class="vip-rank" @click="set">
                  {{ item.auditText }}
                </text>
              </view>
            </view>
          </view>
          <view class="opertion">
            <view class="right currentAccount" v-if="item.phone === userInfo.phone">
              <image
                src="https://pic.bangbangtongcheng.com/static/switchac-current-account.png"
              ></image>
              <p>当前登录</p>
            </view>
            <view class="switchAccount" v-else>
              <view class="deleteAccount">
                <image
                  @click="deleteAccountOpen(item)"
                  src="https://pic.bangbangtongcheng.com/static/switchac-delete-account.png"
                ></image>
              </view>
              <view class="right">
                <image
                  @click="switchAccount(item.phone)"
                  src="https://pic.bangbangtongcheng.com/static/switchac-uncurrent-account.png"
                >
                </image>
                <p>切换此账号</p>
              </view>
            </view>
          </view>
        </view>
        <view
          v-if="item.shopName"
          style="height: 1rpx; background: #ebebed; margin-top: 20rpx"
        ></view>
        <view v-if="item.shopName" class="itemBottom">
          <span>企业名称：</span>{{ item.shopName }}
        </view>
      </view>
    </view>

    <view
      class="switchAccounts"
      @click="bindAddAccountsToOpen"
      :style="!isCanAddAccount ? 'background: #cccccc;' : 'background: #0FA291;'"
      >添加账号</view
    >
    <uni-popup ref="bindDeleteAccount" mode="center" style="z-index: 1">
      <view class="binds_frame">
        <view class="binds_frame_t"></view>
        <view class="binds_frame_c">确定移除此账号吗？</view>
        <view class="binds_frame_b">
          <view class="cancel" @click="$refs.bindDeleteAccount.close()">取消</view>
          <view class="determine" @click="deleteAccount">确定</view>
        </view>
      </view>
    </uni-popup>

    <uniBall></uniBall>
    <view class="motaikuang motaikuang1" v-show="show1" @click="show1 = false">
      <view class="text" @click.stop="aaa">
        <view class="textTitle">{{ text }}</view>
        <scroll-view class="scroll-view" scroll-y>
          <!-- <rich-text :nodes="data.content"></rich-text> -->
          <!-- #ifdef MP-WEIXIN -->
          <rich-text :nodes="data.content"></rich-text>
          <!-- #endif -->
          <!-- #ifndef MP-WEIXIN -->
          <mp-html :content="data.content"></mp-html>
          <!-- #endif -->
        </scroll-view>
      </view>
    </view>
    <view class="motaikuang" v-show="show" @click="show = false">
      <div class="verify" @click.stop="aaa">
        <verify :show="show" @Handle="Handle"></verify>
      </div>
    </view>
    <uni-popup ref="bindAddAccounts" mode="center" style="z-index: 1">
      <view class="binds_frame bindAddAccounts">
        <image
          @click="addAccountClose"
          class="closeAddAccount"
          src="https://pic.bangbangtongcheng.com/addAccount-gb.png"
        ></image>
        <view style="width: 235rpx; height: 200rpx; margin: 0rpx auto">
          <image
            style="width: 100%; height: 100%"
            src="https://pic.bangbangtongcheng.com/logo-transparent.png"
            mode="widthFix"
          />
        </view>
        <view class="phone-login-box">
          <view class="phone-login">
            <view class="login-form">
              <view class="mobile">
                <view class="country-code">账<span style="color: transparent">空</span>号</view>
                <input
                  class="input"
                  v-model="addForm.mobile"
                  placeholder="请输入手机号"
                  type="text"
                />
              </view>
              <view class="code">
                <view class="country-code">验证码</view>
                <input class="input" v-model="addForm.code" type="text" />
                <!-- <view class="getcode"
									:class="{ active: addForm.mobile.length === 11 && !sendCode }" @click="getcode">
									{{ sendCode > 0 ? sendCode + "s后重新发送" : "获取验证码" }}
								</view> -->
                <view class="getcode" @click="getcode">{{ content }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="agreement">
          <!-- <view class="checkbox-box flex_center" @click="checkClick">
						<view class="checkbox flex_center" :class="{ active: status }"> </view>:style="addAgreementStatus ? 'background:#0FA291 !important' : ''"
					</view> -->
          <!-- <checkbox-group class="agreementCheckbox" @change="addAgreementStatusC">
						<checkbox :checked="addAgreementStatus"/>
					</checkbox-group> -->
          <view class="agreementCheckbox" @click="addAgreementStatusC">
            <image
              v-if="addAgreementStatus"
              src="https://pic.bangbangtongcheng.com/static/bbcz/select.png"
            >
            </image>
            <image v-else src="https://pic.bangbangtongcheng.com/static/bbcz/noSelect.png"></image>
          </view>
          <view class="text">
            <text>已阅读并同意</text>
            <span class="tags" @click="tags(2)">《帮帮同城隐私政策》</span>
            和
            <span class="tags" @click="tags(3)">《帮帮同城用户协议》</span>
          </view>
        </view>
        <view class="binds_frame_b">
          <!-- <view class="cancel" @click="$refs.bindAddAccounts.close()">取消</view> -->
          <view class="confirmAddAccount" @click="addAccount">确认添加</view>
        </view>
      </view>
    </uni-popup>

    <view v-if="userAccountList.length == 0" class="none">
      <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
      <view>暂无数据</view>
    </view>
  </view>
</template>

<script>
  import { mapGetters } from 'vuex'
  import Verify from '@/components/VueImageVerify.vue'
  export default {
    data() {
      return {
        content: '获取验证码',
        text: '',
        show: false,
        show1: false,
        data: {
          content: '',
        },
        addForm: {
          mobile: '',
          code: '',
        },
        addAgreementStatus: false,
        sendCode: 0,
        inReview: false, // 是否有审核内容
        starLevel: 4,
        imgUrl: this.$imgSrc,
        published: false,
        phone: '',
        userInfo: uni.getStorageSync('Pduser'),
        tipsList: [],
        userInfo1: {
          openid: '',
          headimgurl: '',
          nickname: '',
          unionid: '',
        },
        autoStatus: true,
        system: '',
        platform: '',
        vipData: {},
        // 判断是"普通用户还是商家，还是经纪人"
        userChage: 3,
        colors: [
          {
            bgColor: '#F5DDCD',
            wordColor: '#4E260A',
            lineColor: '#B6C4C3',
            level: '青铜会员',
          },
          {
            bgColor: '#F7F7F7',
            wordColor: '#A3AAB0',
            lineColor: '#D2D9E0',
            level: '白银会员',
          },
          {
            bgColor: '#FFF8DE',
            wordColor: '#CEAB21',
            lineColor: '#D3CAB2',
            level: '黄金会员',
          },
          {
            bgColor: '#EDFAFF',
            wordColor: '#59B0E6',
            lineColor: '#BBD0DB',
            level: '铂金会员',
          },
          {
            bgColor: '#F2F5FF',
            wordColor: '#284EB6',
            lineColor: '#C1CBEF',
            level: '钻石会员',
          },
          {
            bgColor: '#FDF7FF',
            wordColor: '#A877C6',
            lineColor: '#DBC6E8',
            level: '钻石Ⅰ会员',
          },
          {
            bgColor: '#F8F2FF',
            wordColor: '#78439F',
            lineColor: '#958AC3',
            level: '钻石Ⅱ会员',
          },
          {
            bgColor: '#F4F2F2',
            wordColor: '#8D4581',
            lineColor: '#907B8C',
            level: '钻石Ⅲ会员',
          },
          {
            bgColor: '#F4F2F2',
            wordColor: '#502E30',
            lineColor: '#795D5E',
            level: '王者会员',
          },
        ],
        levelList: [
          {
            name: '青铜',
            img: 'https://pic.bangbangtongcheng.com/static/qt01.png',
          },
          {
            name: '白银',
            img: 'https://pic.bangbangtongcheng.com/static/by01.png',
          },
          {
            name: '黄金',
            img: 'https://pic.bangbangtongcheng.com/static/hj01.png',
          },
          {
            name: '铂金',
            img: 'https://pic.bangbangtongcheng.com/static/bj01.png',
          },
          {
            name: '钻石',
            img: 'https://pic.bangbangtongcheng.com/static/zs01.png',
          },
          {
            name: '钻石I',
            img: 'https://pic.bangbangtongcheng.com/static/zsI01.png',
          },
          {
            name: '钻石II',
            img: 'https://pic.bangbangtongcheng.com/static/zsII01.png',
          },
          {
            name: '钻石III',
            img: 'https://pic.bangbangtongcheng.com/static/zsIII01.png',
          },
          {
            name: '王者',
            img: 'https://pic.bangbangtongcheng.com/static/wz01.png',
          },
        ],
        xzqbList: [],
        myHomepage: [
          {
            id: 1,
            name: '我的主页',
            imgUrl: 'https://pic.bangbangtongcheng.com/static/bbcz/wdxh/wdzy01.png',
          },
          {
            id: 19,
            name: '帮帮安巢',
            imgUrl: 'https://pic.bangbangtongcheng.com/static/bbcz/wdxh/bbac01.png',
          },
          {
            id: 20,
            name: '帮帮车主',
            imgUrl: 'https://pic.bangbangtongcheng.com/static/bbcz/wdxh/bbcz01.png',
          },
          {
            id: 21,
            name: '帮帮招才',
            imgUrl: 'https://pic.bangbangtongcheng.com/static/bbcz/wdxh/bbzc01.png',
          },
        ],
        storeApprove: false,
        brokerApprove: false,
        convencid: uni.getStorageSync('convencid') ? uni.getStorageSync('convencid') : '',
        likeWidth: '',
        scrollLeft: 0,
        newtest: 0,
        fabuZbc: false,
        chainMsg: {},
        chainCarMsg: {},
        auditText: '',
        userIdentityType: null, // 认证类型
        userAuditStatus: null, // 认证状态
        uncertifiedPop: false, // 未认证弹窗
        companyCertifiedPop: false, // 企业认证弹窗
        brokerCertifiedPop: false, // 经纪人认证
        reg_tel: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-9])\d{8}$/,
        canClick: true,
        userAccountList: [],
        totalTime: 60,
        clock: null,
        currentDeleteAccountId: null,
        isCanAddAccount: null,
        // 防抖
        anti_shake: false,
      }
    },
    computed: {
      ...mapGetters(['statusBarHeight1', 'userinfo']),
    },
    components: {
      verify: Verify,
    },
    onLoad() {
      this.getUserAccountList()
    },
    methods: {
      bindAddAccountsToOpen() {
        if (this.isCanAddAccount) {
          this.$refs.bindAddAccounts.open()
        }
      },
      showNickName(nickname) {
        var res = nickname
        if (!res) {
          return '系统默认昵称'
        }
        if (res.length > 10) {
          res = res.substring(0, 10) + '...'
        }
        return res
      },
      switchAccount(phone) {
        this.$myRequest
          .get('/mob/login/getUserInfoByPhone', {
            phone: phone,
          })
          .then((res) => {
            if (res.success) {
              this.userInfo = res.userInfo
              uni.setStorageSync('Pduser', res.userInfo)
              //this.getUserAccountList()
              uni.showToast({
                title: '切换成功',
                icon: 'none',
                mask: true,
              })
              setTimeout(() => {
                uni.reLaunch({
                  url: '/pages/my/index',
                })
              }, 1000)
            } else {
              uni.showToast({
                title: '切换失败',
                icon: 'none',
                mask: true,
              })
            }
          })
      },
      getUserAccountList() {
        if (this.userInfo && this.userInfo.id) {
          this.$myRequest
            .get('/mob/account/queryUserAccountList', {
              userId: this.userInfo.id,
            })
            .then((res) => {
              this.userAccountList = res.data.map((row) => {
                if (row.userAuthenticationDto) {
                  if (row.userAuthenticationDto.auditStatus === '1') {
                    row.auditText = '认证用户'
                  } else {
                    row.auditText = '未认证用户'
                  }
                } else {
                  row.auditText = '未认证用户'
                }
                return row
              })
              if (this.userAccountList.length >= 3) {
                this.isCanAddAccount = false
              } else {
                this.isCanAddAccount = true
              }
            })
        }
      },
      addAgreementStatusC() {
        this.addAgreementStatus = !this.addAgreementStatus
        console.log(this.addAgreementStatus)
      },
      Handle(success) {
        console.log(this.addForm.mobile)
        if (!this.canClick) return //改动的是这两行代码
        this.canClick = false
        this.show = false
        this.content = this.totalTime + 's后重新发送'
        this.$myRequest
          .get('/mob/login/phoneVerification.do', {
            phone: this.addForm.mobile,
            type: 1,
          })
          .then((res) => {
            this.canClick = true //这里重新开启
            this.clock = setInterval(() => {
              this.totalTime--
              this.content = this.totalTime + 's后重新发送'
              if (this.totalTime < 0) {
                clearInterval(this.clock)
                this.content = '重新发送验证码'
                this.totalTime = 60
              }
            }, 1000)
            console.log(res)
            uni.showToast({
              title: '发送验证码成功',
              icon: 'none',
              mask: true,
            })
            this.code = res.CODE
          })
      },
      getcode() {
        // if (this.step == 1) {
        //   this.phone = this.phone.trim();
        //   if (!this.reg_tel.test(this.phone)) {
        //     uni.showToast({
        //       title: "请填写正确的手机号码",
        //       icon: "none",
        //       mask: true
        //     });
        //     return;
        //   }
        //   this.show = true;
        // } else if (this.step == 2) {
        //if (this.type == 22) {
        var tempPhone = this.addForm.mobile.trim()
        console.log(tempPhone)
        if (!this.reg_tel.test(tempPhone)) {
          uni.showToast({
            title: '请填写正确的手机号码',
            icon: 'none',
            mask: true,
          })
          return
        }
        if (this.canClick) {
          console.log(111)
          this.show = true
        }
      },
      back() {
        uni.navigateBack({
          delta: 1,
        })
      },
      deleteAccount() {
        console.log('this.currentDeleteAccountId', this.currentDeleteAccountId)
        this.$myRequest
          .post('/mob/account/deleteUserAccount', {
            id: this.userInfo.id,
            accountId: this.currentDeleteAccountId,
          })
          .then((res) => {
            if (res.success) {
              uni.showToast({
                title: '删除成功',
                icon: 'none',
                mask: true,
              })
              this.getUserAccountList()
              this.$refs.bindDeleteAccount.close()
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none',
                mask: true,
              })
            }
          })
      },
      deleteAccountOpen(item) {
        this.currentDeleteAccountId = item.id
        this.$refs.bindDeleteAccount.open()
      },
      addAccountClose() {
        this.addForm.mobile = ''
        this.addForm.code = ''
        this.addAgreementStatus = false
        this.content = '获取验证码'
        clearInterval(this.clock)
        this.$refs.bindAddAccounts.close()
      },
      addAccount(e) {
        if (this.anti_shake) {
          return false
        }
        if (this.addForm.mobile.length != 11) {
          uni.showToast({
            title: '手机号格式不正确',
            icon: 'none',
            mask: true,
          })
          return
        }
        if (!this.addForm.code) {
          uni.showToast({
            title: '验证码不可为空',
            icon: 'none',
            mask: true,
          })
          return
        }
        if (this.userInfo.phone == this.addForm.mobile) {
          uni.showToast({
            title: '不可重复添加已绑定账号',
            icon: 'none',
            mask: true,
          })
          return
        }
        console.log('this.addAgreementStatus', this.addAgreementStatus)
        if (!this.addAgreementStatus) {
          uni.showToast({
            title: '请先同意《帮帮同城用户协议》和《帮帮同城隐私协议》',
            icon: 'none',
            mask: true,
          })
          return
        }
        this.anti_shake = true
        this.$myRequest
          .post('/mob/account/saveUserAccount', {
            userId: this.userInfo.id,
            accountPhone: this.addForm.mobile,
            captcha: this.addForm.code,
          })
          .then((res) => {
            setTimeout(() => {
              this.anti_shake = false
            }, 500)
            if (res.success) {
              uni.showToast({
                title: '添加成功',
                icon: 'none',
                mask: true,
              })
              this.addAccountClose()
              this.getUserAccountList()
            } else {
              uni.showToast({
                title: res.msg,
                icon: 'none',
                mask: true,
              })
            }
          })
      },
      async tags(type) {
        this.type = type
        if (type == 2) {
          this.text = '隐私协议'
        } else if (type == 3) {
          this.text = '用户服务协议'
        }
        await this.getContent()
        this.show1 = true
      },
      getContent() {
        let _this = this
        _this.$myRequest
          .get('/mob/user/getText', {
            type: this.type,
          })
          .then((res) => {
            this.data = res.list[0]
            this.scrollTop = this.oldScrollTop
            //当视图渲染结束 重新设置为0
            this.$nextTick(() => {
              this.show1 = true
              this.scrollTop = 0
            })
          })
      },
    },
  }
</script>

<style scoped lang="less">
  .flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .user-left {
    width: 170rpx;

    .header-img {
      width: 96rpx;
      height: 96rpx;
      border-radius: 50%;
    }
  }

  .user-photo {
    text-align: center;
    //margin: 0 22rpx 0 0;
    //background-color: red;

    image {
      margin-top: 10%;
    }

    .label-box {
      div {
        margin-top: 10rpx;
        height: 34rpx;
        line-height: 34rpx;
        text-align: center;
        font-size: 22rpx;
        font-weight: 600;
        letter-spacing: 2rpx;
      }
    }

    .personal-label {
      display: inline-block;
      padding: 2rpx 6rpx;
      min-width: 154rpx;
      background: url('https://pic.bangbangtongcheng.com/static/my/tag1.png') center no-repeat;
      background-size: cover;

      text {
        color: #333;
        font-size: 22rpx;
      }
    }

    .shop-label {
      display: inline-block;
      padding: 2rpx 6rpx;
      min-width: 154rpx;
      background: url('https://pic.bangbangtongcheng.com/static/my/tag2.png') center no-repeat;
      background-size: cover;

      text {
        color: #4e260a;
        font-size: 22rpx;
      }
    }
  }

  .checkbox-box {
    width: 68rpx;
    height: 68rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .checkbox {
      width: 48rpx;
      height: 48rpx;
      border-radius: 50%;
      border: 2rpx solid #64b6a8;

      &.active {
        background: #64b6a8;
      }

      &.active::after,
      &.active::before {
        content: '';
        background: #fff;
        width: 4rpx;
        border-radius: 10rpx;
      }

      &.active::before {
        height: 22rpx;
        transform: translate(6rpx, 0rpx) rotate(45deg);
      }

      &.active::after {
        height: 12rpx;
        transform: translate(-10rpx, 4rpx) rotate(-45deg);
      }
    }
  }

  .bindAddAccounts {
    padding: 50rpx;
    background-image: url('https://pic.bangbangtongcheng.com/addAccount-bg.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;

    .agreement {
      display: flex;
      padding-left: 10rpx;
      //padding-top: 50rpx;
      font-size: 26rpx;
      align-items: top;
      text-align: left;

      .text {
        margin-left: 10rpx;
        font-size: 28rpx;
      }

      .agreementCheckbox {
        width: 50rpx;
        height: 28rpx;
        margin-top: 5rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .tags {
        //color: #64b6a8;
      }
    }

    .closeAddAccount {
      position: absolute;
      top: 50rpx;
      right: 50rpx;
      width: 30rpx;
      height: 30rpx;
    }

    .phone-login-box {
      width: 100%;
      margin: 80rpx 0rpx;

      .phone-login {
        display: flex;
        justify-content: start;
        position: relative;
        text-align: left;
        width: 100%;

        .login-form {
          width: 100%;

          .code,
          .mobile {
            padding-bottom: 20rpx;
            font-size: 32rpx;

            .country-code {
              margin-right: 20rpx;
              width: 25%;
            }

            .input {
              width: 75%;
              border-radius: 10rpx;
              border: 1rpx solid #cccccc;
              font-size: 28rpx;
              padding: 0rpx 20rpx;
              height: 90rpx;
            }

            .getcode {
              color: #0fa291;
              font-size: 32rpx;
              position: absolute;
              right: 33rpx;

              &.active {
                color: #64b6a8;
              }
            }
          }

          .mobile {
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;
          }

          .code {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
        }
      }
    }
  }

  .binds_frame {
    width: 600rpx;
    background-color: #ffffff;
    // padding-bottom: 50rpx;
    border-radius: 20rpx;
    text-align: center;
    font-size: 36rpx;
    overflow: hidden;

    .binds_frame_t {
      font-weight: 550;
      color: #000000;
      padding: 0 46rpx;
      padding-top: 36rpx;
    }

    .binds_frame_c {
      width: 500rpx;
      margin: 0 auto;
      font-weight: 500;
      color: #000000;
      margin-top: 30rpx;
      margin-bottom: 50rpx;
    }

    .binds_frame_b {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .confirmAddAccount {
        border: none;
        width: 550rpx;
        height: 90rpx;
        background: #0fa291;
        border-radius: 45rpx;
        text-align: center;
        margin: 0rpx auto;
        color: white;
        line-height: 90rpx;
        margin-top: 80rpx;
      }

      .cancel {
        flex: 1;
        height: 90rpx;
        border: 1px solid #eee;
        border-radius: 10rpx 0 0 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        color: #999999;
      }

      .determine {
        flex: 1;
        height: 90rpx;
        border: 1px solid #eee;
        border-radius: 0 10rpx 10rpx 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        color: #0fa291;
      }
    }
  }

  .list {
    margin: 20rpx;

    .item {
      position: relative;
      padding: 20rpx;
      background-color: white;
      margin-bottom: 20rpx;
      border-radius: 20rpx;

      .itemTop {
        display: flex;
        justify-content: start;

        .headerBox {
          margin-top: 10rpx;
          text-align: center;

          .header {
            image {
              width: 96rpx;
              height: 96rpx;
              border-radius: 80rpx;
            }

            margin-bottom: 10rpx;
          }

          .label {
            image {
              width: 118rpx;
              height: 34rpx;
            }
          }
        }

        .info {
          margin-top: 10rpx;
          margin-left: 15rpx;

          view {
            margin-bottom: 20rpx;
          }

          /* .username{
							font-weight: 500;
							font-size: 36rpx;
							color: #000000;
							line-height: 36rpx;
						}
						.userAccount{
							font-size: 24rpx;
							color: #333333;
							line-height: 24rpx;
						}
						.userLevel{
							
						} */
          .user {
            justify-content: space-between;
            padding-top: 11rpx;
            padding: 11rpx 0 0 0;
            background: transparent;
            border: none;
            margin: 0;
            // margin-left: 45rpx;
            /* #ifdef MP-WEIXIN */
            // margin-left: 45rpx;
            /* #endif */

            .name {
              position: relative;
              margin-bottom: 14rpx;

              .user-name {
                font-size: 36rpx;
                line-height: 36rpx;
                text-align: left;
                margin-bottom: 10rpx;
                overflow: hidden;
                white-space: nowrap;
              }

              .user-names {
                font-size: 34rpx;
                line-height: 50rpx;
                margin-bottom: 10rpx;
                // overflow: hidden;
                // white-space:nowrap;
                display: flex;
                align-items: center;

                .image {
                  width: 30rpx;
                  height: 30rpx;
                  margin-left: 18rpx;
                }
              }

              .info {
                position: relative;
                right: 0rpx;
                width: 160rpx;
                font-size: 24rpx;
                padding: 5rpx 20rpx;
                border-radius: 100rpx;
                border: 2rpx solid #fff;
                text-align: center;
                // margin-left: 60rpx;
                /* #ifdef MP-WEIXIN */
                // font-size: 24rpx;
                // padding: 0rpx 10rpx;
                // border-radius: 100rpx;
                // border: 2rpx solid #fff;
                // text-align: center;
                // margin-left: 100rpx;
                /* #endif */
              }
            }

            .user-account {
              font-size: 24rpx;
              line-height: 32rpx;
              text-align: left;
              color: #333;
              margin-bottom: 14rpx;
            }

            .user-member {
              margin-bottom: 14rpx;
              text-align: left;

              .vip-rank {
                display: inline-block;
                padding: 5rpx 15rpx;
                margin: 0 18rpx 0 0;
                background: #f6f0ff;
                border-radius: 4rpx;
                opacity: 1;
                font-size: 24rpx;
                font-weight: 500;
                // color: #bd90d9;
                text-align: center;
                color: #999;
                background: #f5f7f9;
              }

              .has-audit {
                color: #0fa291;
                background: #e7f5f4;
              }
            }

            .user-label {
              display: flex;
              justify-content: left;
              align-items: center;
              font-size: 24rpx;
              color: #333;

              .star-vip {
                ::deep .u-rate__content__item {
                  width: 30rpx;
                }
              }
            }

            .tag {
              display: flex;

              .tag-child {
                width: 120rpx;
                height: 44rpx;
                line-height: 44rpx;
                text-align: center;
                background: url(https://pic.bangbangtongcheng.com/static/my/tag1.png) no-repeat;
                background-size: 100% 100%;
                // align-items: center;
                // justify-content: center;
                // display: flex;
                margin-right: 20rpx;
                color: #fff;
                font-size: 22rpx;
              }
            }
          }

          .user::after {
            border: none;
          }
        }

        .opertion {
          text-align: center;
          font-size: 24rpx;

          background-color: red;

          image {
            width: 48rpx;
            height: 48rpx;
          }

          .currentAccount {
            color: #0fa291;
          }

          .switchAccount {
            color: #666666;
          }

          .deleteAccount {
            position: absolute;
            top: 8%;
            right: 20rpx;

            image {
              width: 32rpx !important;
              height: 32rpx !important;
            }
          }

          .right {
            position: absolute;
            top: 50%;
            right: 20rpx;
            transform: translateY(-40%);
          }
        }
      }

      .itemBottom {
        font-size: 24rpx;
        padding-top: 20rpx;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; //想要的行数
        -webkit-box-orient: vertical;
      }
    }
  }

  page {
    background: #f5f7f9;
  }

  .image1 {
    position: absolute;
    width: 32rpx;
    height: 32rpx;

    left: 30rpx;
  }

  .tou {
    position: fixed;
    width: 100%;
    text-align: left;
    line-height: 88rpx;
    font-size: 32rpx;
    color: black;
    z-index: 10;

    span {
      padding-left: 70rpx;
      font-weight: 700;
    }
  }

  .switchAccounts {
    width: 670rpx;
    height: 90rpx;
    border-radius: 45rpx;
    line-height: 90rpx;
    text-align: center;
    color: #fff;
    font-size: 30rpx;
    margin: 0 auto;
    position: fixed;
    bottom: 70rpx;
    left: 50%;
    transform: translateX(-50%);
  }

  .motaikuang {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 20;

    .verify {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .motaikuang1 {
    .text {
      position: fixed;
      bottom: 0;
      width: 100%;
      background: #fff;
      left: 0;
      padding-top: 60rpx;
      padding-bottom: 100rpx;
      border-radius: 50rpx 50rpx 0 0;

      .textTitle {
        font-size: 36rpx;
        line-height: 50rpx;
        text-align: center;
        margin-bottom: 50rpx;
      }

      .scroll-view {
        height: 700rpx;
        margin: 0 auto;
        width: 630rpx;
      }
    }
  }

  .down {
    height: 60rpx;
    line-height: 60rpx;
    // border-top: 2rpx solid #d0d0d0;
    text-align: center;
  }

  .none {
    text-align: center;

    image {
      width: 430rpx;
      margin-bottom: 16rpx;
    }

    view {
      height: 40rpx;
      line-height: 40rpx;
      color: #666;
    }
  }
</style>
